<template>
    <el-main>

      <el-cascader
        :options="allRegions"
        :props="{ checkStrictly: true }"
        v-model="city"
        clearable></el-cascader>

      <el-input v-model="seachRoom.premisesname" placeholder="请输入楼盘名称"></el-input>

      <el-button type="primary" @click="list">查询</el-button>

      <br>

      <el-radio-group v-model="updateRoom.status">
        <el-radio label="0" >待看房</el-radio>
        <el-radio label="1" >已看房</el-radio>
      </el-radio-group>
      <el-button icon="el-icon-edit" type="warning" @click="updateStatus">批量设置状态</el-button>


        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange">

          <el-table-column
            type="index">
          </el-table-column>

          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
        <el-table-column
          prop="id"
          width="100"
          label="id">
        </el-table-column>
        <el-table-column
          prop="premisesname"
          label="楼盘名称">
        </el-table-column>
        <el-table-column
          prop="showingsName"
          label="预约人">
        </el-table-column>
          <el-table-column
            prop="showingsMobile"
            label="联系人电话电话">
          </el-table-column>
          <el-table-column
            prop="roomname"
            label="预约房源">
          </el-table-column>
          <el-table-column
            prop="reserveTime"
            label="预约时间">
          </el-table-column>
          <el-table-column
            label="预约状态">
            <template slot-scope="scope">
              {{scope.row.status==0?'待看房':'已看房'}}
            </template>
          </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=seachRoom.pageNum
        :page-sizes="[1, 3, 5, 10]"
        :page-size=seachRoom.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </el-main>
</template>

<script>

  import { listRoomReservation,listRegion,updateRoomReservationStatus } from "@/api/housing/appointment";

export default {
  data() {
    return {
      //列表集合
      tableData: [],
      //查询对象
      seachRoom:{
        pageNum :1,
        pageSize:10,

      },
      city:[],
      updateRoom:{
        ids:[],
        status:''
      },
      total:null,
      allRegions:[],

    }
  },
  methods:{
    //查询预约房源列表
    list(){
      console.log("seachRoom",this.seachRoom)
      //判断模糊查询的城市有没有被选中
      if (this.city.length!=0){
        if (this.city.length==1){
          this.seachRoom.province = this.city[0];
        }
        if (this.city.length==2){
          this.seachRoom.city = this.city[1];
        }
        if (this.city.length==3){
          this.seachRoom.county = this.city[2];
        }
      }
      listRoomReservation(this.seachRoom).then(res=>{
        console.log(res);
        this.tableData = res.msgData.records;
        this.seachRoom.pageNum = res.msgData.current;
        this.seachRoom.pageSize = res.msgData.size;
        this.total = res.msgData.total;
      })
    },
    //表头多选框
    handleSelectionChange(val) {
      this.updateRoom.ids = val.map(res=>{return res.id});
      console.log(this.updateRoom.ids);
    },
    //获取所有地区
    regions(){
      listRegion().then(res=>{
        console.log(res);
        this.allRegions = res.msgData;
      })
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.seachRoom.pageNum = 1;
      this.seachRoom.pageSize = val;
      this.list()
    },
    //当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.seachRoom.pageNum = val;
      this.list();
    },
    //批量设置状态
    updateStatus(){
      if (this.updateRoom.ids.length>0&&this.updateRoom.status!=''){
        updateRoomReservationStatus(this.updateRoom).then(res=>{
          this.$message.success("修改成功");
          this.list();
          this.updateRoom = {
            ids:[],
            status:''
          }
        })
      }else {
        this.$message.warning("请先选择房源/状态");
      }
    }
  },
  created() {
      this.list();
      this.regions();
  }
}
</script>

<style scoped>
.el-input{
  width: 200px;
}
</style>
